<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>意见类评价</title>
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.9/index.js"></script>
</head>
<body>

<div id="c1"></div>
<script>
      var data = [
        {name: '客服人员态度有待改进', value: 56.33 },
        {name: '退票流程繁琐', value: 24.03},
        {name: '出票速度很慢', value: 10.38},
        {name: '优惠力度不大',  value: 4.77},
        {name: '酒店选择太少', value: 0.91},
        {name: '其他', value: 0.2}
      ];
      var Stat = G2.Stat;
      var chart = new G2.Chart({
        id: 'c1',
        forceFit: true,
        height: 450
      });
      chart.source(data);
      // 重要：绘制饼图时，必须声明 theta 坐标系
      chart.coord('theta', {
        radius: 0.8 // 设置饼图的大小
      });
      chart.legend('name', {
        position: 'bottom',
        itemWrap: true,
        formatter: function(val) {
          for(var i = 0, len = data.length; i < len; i++) {
            var obj = data[i];
            if (obj.name === val) {
              return val + ': ' + obj.value + '%';
            }
          }
        }
      });
      chart.tooltip({
        title: null,
        map: {
          value: 'value'
        }
      });
      chart.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('name')
        .label('name*..percent',function(name, percent){
        percent = (percent * 100).toFixed(2) + '%';
        return name + ' ' + percent;
      });
      chart.render();
      // 设置默认选中
      var geom = chart.getGeoms()[0]; // 获取所有的图形
      var items = geom.getData(); // 获取图形对应的数据
      geom.setSelected(items[1]); // 设置选中
    </script>

<div id="c2"></div>
<script>
      var data = [
        {name: '客服人员态度有待改进', value: 56.33 },
        {name: '退票流程繁琐', value: 24.03},
        {name: '出票速度很慢', value: 10.38},
        {name: '优惠力度不大',  value: 4.77},
        {name: '酒店选择太少', value: 0.91},
        {name: '其他', value: 0.2}
      ];
      var Stat = G2.Stat;
      var chart = new G2.Chart({
        id: 'c2',
        forceFit: true,
        height: 450
      });
      chart.source(data);
      // 重要：绘制饼图时，必须声明 theta 坐标系
      chart.coord('theta', {
        radius: 0.8 // 设置饼图的大小
      });
      chart.legend('name', {
        position: 'bottom',
        itemWrap: true,
        formatter: function(val) {
          for(var i = 0, len = data.length; i < len; i++) {
            var obj = data[i];
            if (obj.name === val) {
              return val + ': ' + obj.value + '%';
            }
          }
        }
      });
      chart.tooltip({
        title: null,
        map: {
          value: 'value'
        }
      });
      chart.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('name')
        .label('name*..percent',function(name, percent){
        percent = (percent * 100).toFixed(2) + '%';
        return name + ' ' + percent;
      });
      chart.render();
      // 设置默认选中
      var geom = chart.getGeoms()[0]; // 获取所有的图形
      var items = geom.getData(); // 获取图形对应的数据
      geom.setSelected(items[1]); // 设置选中
    </script>
</div>

</body>
</html>
